<!-- @Author: Yu_Bo -->
<template>
	<view class="home" :style="[pageStyle]">
		<!-- nav -->
		<c-navbar navtype='home'></c-navbar>
		<!-- background -->
		<view class=".page_background_two {"></view>
		<!-- main -->
		<view class="home_main">
			<!-- 搜索 -->
			<view class="main_search" @click="searchBtn">
				<view class="search">
					<view class="search_left">
						搜索ISBN/书名/作者/出版社
					</view>
					<view class="search_right">
						<image src="@/static/images/img/home_icon_s.png" mode=""></image>
					</view>
				</view>
			</view>
			<!-- 公告 -->
			<view class="main_notice">
				<view class="left">
					<image src="@/static/images/img/home_icon_noic.png" mode=""></image>
				</view>
				<view class="right">
					<u-notice-bar mode="horizontal" :list="noticelist" type="none" :volume-icon="false"></u-notice-bar>
				</view>
			</view>
			<!-- 获取 -->
			<view class="main_obtain">
				<view class="obtain">
					<image class="obtain_icon" src="@/static/images/img/home_icon_ss.png" mode=""></image>
					<view class="obtain_info">
						<view class="info_title">
							快速获取教材单
						</view>
						<view class="info_input">
							<text class="input_yes line_one" v-if="userinfo && schoolinfo">{{schoolinfo}}</text>
							<text class="input_no" v-else>请选择学院/年级/专业</text>
						</view>
					</view>
					<view class="obtain_btn" @click="obtainBtn">
						立即获取
					</view>
				</view>
			</view>
			<!-- 热门推荐 -->
			<view class="main_hot">
				<view class="hot_title">
					<image src="@/static/images/img/home_icon_tj.png" mode=""></image>
					<text>热门推荐</text>
				</view>
				<c-goodslist :list="list"></c-goodslist>
			</view>
		</view>
		<!-- 库管 -->
		<view class="home_botton" v-if="admin==1" @click="warehouseBtn">
			<image src="@/static/images/img/home_right_btn.png" mode=""></image>
		</view>
		<!--  -->
		<c-warehouse ref="warehouse"></c-warehouse>
		<!--  -->
		<c-prompttwo ref="prompttwo" text="您暂未绑定学籍信息\n点击下方去绑定" @confirm="confirmBtn"></c-prompttwo>
		<!--  -->
		<c-promptone ref="promptone" text="未找到您的书单，请检查输入是否正确，或联系客服"></c-promptone>
	</view>
</template>

<script>
	import { mapState } from "vuex"
	export default {
		components: {},
		data() {
			return {
				// 公告
				noticelist: [],
				// 热门推荐
				list: [],
			}
		},
		computed: {
			...mapState({
				admin: (state) => state.admin || 0,
				userinfo: (state) => state.userinfo,
			}),
			pageStyle() {
				return {
					'--pagebackground': "url(" + require('@/static/images/img/home_nav_bg.png') + ")"
				}
			},
			schoolinfo() {
				if(this.userinfo.college && this.userinfo.grade && this.userinfo.speciality) {
					return this.userinfo.college + '/' + this.userinfo.grade + '/' + this.userinfo.speciality
				} else {
					return ""
				}
			},
		},
		onLoad() {
			
		},
		onShow() {
			this.getList()
			this.getMessage()
			this.$nextTick(()=>{
				if(this.userinfo && this.userinfo.college_id == "") {
					this.$refs.prompttwo.openBtn()
				}
			})
		},
		methods: {
			// 热门推荐
			getList() {
				var that = this
				that.$httpApi.hotGoods().then((res) => {
					if (res.code == 1) {
						that.list = res.data
					}
				})
			},
			getMessage() {
				var that = this
				that.$httpApi.message().then((res) => {
					if (res.code == 1) {
						var arr = res.data
						arr.forEach((item) => {
							this.noticelist.push(item.content)
						})
					}
				})
			},
			// 搜索
			searchBtn() {
				this.$navToLogin("/pagesHome/search/index")
			},
			// 库管
			warehouseBtn() {
				this.$refs.warehouse.openBtn()
			},
			// 选择学院
			confirmBtn() {
				this.$navToLogin("/pagesHome/student/index")
			},
			// 立即获取
			obtainBtn() {
				if (this.schoolinfo == "") {
					this.$navToLogin("/pagesHome/student/index")
				} else {
					this.$navToLogin("/pagesHome/textbook/index")
				}
			},
		},
	}
</script>

<style lang='scss' scoped>
	.home {
		width: 100%;
		
		.home_main {
			position: relative;
			z-index: 2;
			width: 100%;
			
			.main_search {
				width: 100%;
				padding: 30rpx 30rpx 0;
				
				.search {
					width: 100%;
					height: 80rpx;
					border-radius: 40rpx;
					border: 2rpx solid #5A68FF;
					display: flex;
					align-items: center;
					justify-content: space-between;
					
					.search_left {
						padding-left: 35rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #999999;
					}
					
					.search_right {
						width: 96rpx;
						height: 64rpx;
						margin-right: 8rpx;
						background: #5A68FF;
						border-radius: 32rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						
						image {
							display: block;
							width: 32rpx;
							height: 32rpx;
						}
					}
				}
			}
			
			.main_notice {
				width: 100%;
				padding: 0 30rpx;
				/* background: #FFFFFF; */
				display: flex;
				align-items: center;
				
				.left {
					width: 24rpx;
					height: 28rpx;
					
					image {
						display: block;
						width: 100%;
						height: 100%;
					}
				}
				
				.right {
					width: calc(100% - 24rpx);
					
					::v-deep .u-notice-bar {
						padding: 9px 0 !important;
					}
					
					::v-deep .u-notice-text {
						color: #5A68FF !important;
					}

				}
			}
			
			.main_obtain {
				width: 100%;
				padding: 0 30rpx 40rpx;
				/* background: #FFFFFF; */
				
				.obtain {
					width: 100%;
					padding: 0 30rpx;
					height: 160rpx;
					background: #E9EBFF;
					border-radius: 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					
					.obtain_icon {
						display: block;
						width: 80rpx;
						height: 80rpx;
					}
					
					.obtain_info {
						width: calc(100% - 240rpx);
						padding: 0 20rpx;
						
						.info_title {
							width: 100%;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #222222;
						}
						
						.info_input {
							width: 100%;
							height: 60rpx;
							padding: 0 20rpx;
							margin-top: 20rpx;
							background: #fff;
							border-radius: 30rpx;
							border: 2rpx solid #5A68FF;
							display: flex;
							align-items: center;
							
							.input_yes {
								display: block;
								color: #333;
								font-size: 24rpx;
							}
							
							.input_no {
								display: block;
								color: #999;
								font-size: 24rpx;
							}
						}
					}
					
					.obtain_btn {
						width: 160rpx;
						height: 64rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #FFFFFF;
						background: #5A68FF;
						border-radius: 32rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}
			
			.main_hot {
				width: 100%;
				padding: 0 30rpx 30rpx;
				border-radius: 30rpx 30rpx 0 0;
				background: linear-gradient(-180deg, #EBECFF 0%, #f6f6f6 100%);
			
				.hot_title {
					width: 100%;
					padding: 40rpx 0;
					display: flex;
					align-items: center;
					
					image {
						display: block;
						width: 40rpx;
						height: 40rpx;
					}
					
					text {
						padding-left: 12rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 600;
						font-size: 36rpx;
						color: #222222;
					}
				}
			}
		}
		
		.home_botton {
			position: fixed;
			bottom: 120rpx;
			right: 0;
			z-index: 20;
			width: 120rpx;
			height: 120rpx;
			
			image {
				display: block;
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
	}
</style>